<template>
  <el-dialog v-model="dialogFormVisible" title="维护网格信息窗口" width="500">
    <el-form :model="form">
      <el-form-item label="网格编号：" :label-width="formLabelWidth">
        <el-input readonly v-model="form.gid" autocomplete="off" />
      </el-form-item>
      <el-form-item label="名称：" :label-width="formLabelWidth">
        <el-input v-model="form.gname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="详情：" :label-width="formLabelWidth">
        <el-input v-model="form.gdesc" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态：" :label-width="formLabelWidth">
        <el-switch
          v-model="form.status"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          :active-value="1"
          :inactive-value="0"
          active-text="正常业务网格"
          inactive-text="不提供服务"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="gridStore.openOrClose">Cancel</el-button>
        <el-button :icon="Promotion" type="primary" @click="gridStore.save"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="js" setup>
import { useGridStore } from '@/stores/grid'
import { Promotion } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
const gridStore = useGridStore()

const { dialogFormVisible, form } = storeToRefs(gridStore)

const formLabelWidth = '140px'
</script>
